<template>
  <div class="orderDetail">
    <div class="orderDetail-header">
      <div class="header-headline">服务中</div>
      <div class="header-main">
        <div class="main-wait">
          <span class="main-title">剩余时长</span>
          <span class="main-value">10秒</span>
        </div>
        <div class="main-pay">
          <span class="main-title">总计付款</span>
          <span class="main-value">5奇妙币</span>
        </div>
        <div class="main-grade">
          <span class="main-title">订单等级</span>
          <span class="main-value">中级</span>
        </div>
      </div>
    </div>
    <div class="orderDetail-waist">
      <div class="order-user-info">
        <div class="user-headImg-wrapper">
          <img src="@/assets/img/head.jpg" alt="" class="user-headImg">
          <van-tag round type="primary" class="user-level">LV1</van-tag>
        </div>
        <div class="user-nickname-type">
          <div class="user-nickname">大V超人</div>
          <div class="user-type">文字&语音条 30分钟</div>
        </div>
      </div>
      <div class="order-info">
        <div class="info-list" v-for="(item, index) in infoList" :key="index">

          <div class="info-list-left wx_copy" v-if="item.info_name=='微信号：'" v-model="wx = item.info_value">{{item.info_name}}</div>
          <div class="info-list-left" v-else>{{item.info_name}}</div>
          <div class="info-list-right">{{item.info_value}}</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
    export default {
        name: "ClerkOrderStatus",
        data: function () {
        return {
          infoList:[
            {
              info_name:'订单编号：',
              info_value:'100159045645047'
            },
            {
              info_name:'付款时间：',
              info_value:'2020-05-26 08:04'
            },
            {
              info_name:'微信号：',
              info_value:'13053571993'
            },
            {
              info_name:'服务等级：',
              info_value:'中级'
            },
            {
              info_name:'服务类型：',
              info_value:'文字&语音条'
            },
            {
              info_name:'服务时长：',
              info_value:'30分钟'
            },
          ],
          wx :'',
          showSuccess: false,
          showError:false,
          showServer:false,
          showServerGo:false
        }
      },
    }
</script>

<style scoped lang="stylus">
  @import '~style/mixins.styl'
  @import '~style/varibles.styl'
  .orderDetail
    padding .2rem
    .orderDetail-header
      background-color $DefaultWalletColor
      border-radius .2rem
      padding .3rem 0 .5rem 0
      .header-headline
        padding .3rem 0 .5rem 0
        font-size .5rem
        color $DefaultTextColor
        center()
      .header-main
        between-align-items()
        .main-wait, .main-pay, .main-grade
          width calc(100% / 3)
          display flex
          align-items center
          flex-direction column
        .main-title
          color $DefaultTextColor
          font-size .3rem
          padding-bottom .3rem
        .main-value
          color $DefaultTextColor
          font-size .36rem
          padding-bottom .3rem
    .orderDetail-waist
      width calc(100% - .6rem)
      padding .3rem
      border-radius .3rem
      background-color #fff
      .order-user-info
        left()
        .user-headImg-wrapper
          width 1.4rem
          height 1.4rem
          position relative
          .user-headImg
            border-radius .2rem
            height 100%
            width 100%
          .user-level
            position absolute
            bottom 0
            display inline-block
            text-align center
            font-size .1rem
            width .8rem
            border-radius .3rem
            background #000
            color: #fff
        .user-nickname-type
          padding-left .3rem
          display flex
          flex-direction column
          align-items flex-start
          justify-content center
          .user-nickname
            color #666
            font-size .26rem
            padding-bottom .2rem
          .user-type
            color #333
            font-size .3rem
      .order-info
        padding-top .1rem
        .info-list
          padding-top .3rem
          between-align-items()
          .info-list-left
            font-size .3rem
            color #999
          .info-list-right
            font-size .3rem
            color #333


</style>
<style>
  .orderDetail .user-level{
    right: 0;
  }
</style>
